<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>grid system</title>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="easy_music.css">
	
	
</head>
<body>
	<div class="container">
	    <h1 style="text-align:center">简易音乐播放器</h1>
      	<table class="table table-hover table-bordered">
			<!-- <caption>请选择下面的歌曲</caption> -->
			   <thead style="color:red;text-align:center;">
					<tr class="success">
						<th>歌曲名称</th>
						<th>专辑</th>
						<th>时长</th>
						<th>热度</th>
						<th>操作</th>
					</tr>
			   </thead>
		   <tbody id="music_idx">
		   </tbody>
		</table>
	</div>
	<div class="row">  
		<div class="col-md-4" style="margin:0 auto;float:none;">  
			<div>
				正在播放: <strong id="rmusic"></strong>  
			</div> 
			<audio id="audio_xx" src="music/稻香.mp3" controls="controls"></audio>  
			<br>
			<div class="btn-group" id="ctrl-area">  
				<button id="btn-play" class="btn btn-success">播放</button>  
				<button id="btn-pre" class="btn btn-success">上一首</button>  
				<button id="btn-next" class="btn btn-success">下一首</button>  
				<button id="btn-pause" class="btn btn-success">暂停</button>
			</div>
		</div>  
	</div>
	<div id="info">
        HTML5 Audio API showcase | An Audio Viusalizer
    </div>
	<div class="row">  
		<div class="col-md-4" style="margin:0 auto;float:none;background-color: #626B6E;">  
			<div id="visualizer_wrapper">
                <canvas id='canvas' width="800" height="350"></canvas>
            </div>
		</div>  
	</div>

	<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<script src="easy_music.js"></script>
</body>
</html>